<template>
  <div class="test-form">
    <parser :key="key2" :form-conf="formConf" :is-submit="true" @submit="sumbitForm1" />
  </div>
</template>

<script>
import Parser from '../Parser'

// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'

export default {
  components: {
    Parser
  },
  props: {},
  data() {
    return {
      key2: +new Date(),
      // eslint-disable-next-line max-len
      formConf: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const { query } = this.$route
    // 表单数据回填，模拟异步请求场景
    setTimeout(() => {
      // 请求回来的表单数据
      const data = {
        mobile: '18836662555'
      }
      // 回填数据
      this.fillFormData(this.formConf, data)
      // 更新表单
      this.key2 = +new Date()
    }, 100)
    this.$axios({
      method: 'get',
      url: `http://127.0.0.1:8080/flow-task/form-template?flowDeployId=${query.flowDeployId}`
    }).then(res => {
      this.formConf = JSON.parse(res.data.data.content)
    })
  },
  methods: {
    fillFormData(form, data) {
      form.fields.forEach(item => {
        const val = data[item.__vModel__]
        if (val) {
          item.__config__.defaultValue = val
        }
      })
    },
    change() {
      this.key2 = +new Date()
      const t = this.formConf
      this.formConf = this.formConf2
      this.formConf2 = t
    },
    sumbitForm1(data) {
      const { query } = this.$route
      this.$axios({
        method: 'post',
        url: `http://127.0.0.1:8080/flow-task/start-process?flowDeployId=${query.flowDeployId}`,
        data
      }).then(res => {
        this.$router.push({ path: '/approve', query: { flowInstanceId: res.data.flowInstanceId } })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}
</style>
